import React, { Component } from 'react'


/*
    这里我们使用的是祖先组件给后代组件传递参数，所谓逐层传递就是一层一层的往下传，中间
    不可出现断层的情况，否则会导致后代组件无法正常使用
*/

class First extends Component {
    render() {
        return (
            <>
                <div>First 组件 ---- {this.props.title}</div>
                <Son title={this.props.title} />
            </>
        )
    }
}

const Son = (props) => {
    return <>
        <div>Son 组件 ----- {props.title}</div>
    </>
}

export default class App extends Component {
    state = {
        title: '传家宝'
    }
    render() {
        return (
            <div>
                <div>App ----- {this.state.title} </div>
                <First title={this.state.title} />
            </div>
        )
    }
}
